<template>
	<view class="l_pages" :style="skin">
		<jnavbar :title="title" :PageId="15"></jnavbar>
		<block v-if="tab == 0">
		
			<scroll-view class="list page_container" scroll-y @scrolltolower="getlist">
				<view class="item uni-flex-row uni-flex-column user_cou" v-for="item in couponlist">
					<!-- <view class="uni-flex-column uni-flex-column-center price sm-font">
						<text class="lg-font">￥{{ item.denomination }}</text>
						<text>满{{ item.conditions }}可用</text>
					</view>
					<view class="uni-flex-column content">
						<text>{{ item.name }}</text>
						<text v-if="item.time_limit_type == 0">领取日内{{ item.limit_time }}天有效</text>
						<text v-if="item.time_limit_type == 1">{{ item.limit_indate_begin }}-{{ item.limit_indate_end }}</text>
					</view>
					<view class="uni-flex-column btns" @click="todetail(item.id)"><text>立即领取</text></view>
 -->
					<view class="title u-flex uni-flex-title">
						<text>{{ item.name }}</text>
						<text>{{ item.merchant_name }}</text>
					</view>
					<view class="uni-flex-row content">
						<view class="uni-flex-column-center price">
							<view class="num">
								<text class="">{{ item.denomination }}</text>
								<text>元</text>
							</view>
							<text>满{{ item.conditions }}元立减</text>
						</view>
						<view class="yline"></view>
						<view class="rule">
							<template v-if="item.commodity_limit_type == 1">
								<text>商品可用:</text>
								<text>{{ item.limit_value }}</text>
							</template>
							<template v-if="item.commodity_limit_type == 2">
								<text>商品不可用:</text>
								<text>{{ item.limit_value }}</text>
							</template>
							<template v-if="item.commodity_limit_type == 3">
								<text>分类可用:</text>
								<text>{{ item.limit_value }}</text>
							</template>
						</view>
					</view>
					<view class="coupon_botom">
						<text v-if="item.time_limit_type == 0">领取日内{{ item.limit_time }}天有效</text>
						<text v-if="item.time_limit_type == 1">
							{{ $u.timeFormat(item.limit_indate_begin, 'yyyy年mm月dd日') }}—{{ $u.timeFormat(item.limit_indate_end, 'yyyy年mm月dd日') }}
						</text>
						<view class="uni-flex-column btns" @click="todetail(item.id)">立即领取</view>
					</view>
				</view>
			</scroll-view>
		</block>
		<block v-if="tab == 1">
			<view class="page_container">
				<view class="uni-block-bar uni-view uni-flex-row uni-underline">
					<view :class="[tabIndex == 0 ? 'active' : '', 'item', 'uni-center', 'lg-font']" data-id="0" @click="tapTab(0)"><text>未使用</text></view>
					<view :class="[tabIndex == 1 ? 'active' : '', 'item', 'uni-center', 'lg-font']" data-id="1" @click="tapTab(1)"><text>已使用</text></view>
					<view :class="[tabIndex == 2 ? 'active' : '', 'item', 'uni-center', 'lg-font']" data-id="2" @click="tapTab(2)"><text>已过期</text></view>
				</view>
				<scroll-view class="list clist" scroll-y @scrolltolower="mylist">
					<u-collapse>
						<block v-for="(item, i) in userlist" :key="i">
							<view class="item uni-flex-row uni-flex-column " v-bind:class="item.status == 0 ? 'user_cou' : 'user_cou can_cal'">
								<view class="title uni-flex-title u-flex">
									<text>{{ item.coupon.name }}</text>
									<text>{{ item.merchant_name }}</text>
								</view>

								<view class="uni-flex-row content">
									<view class="uni-flex-column-center price">
										<view class="num">
											<text class="">{{ item.coupon.denomination }}</text>
											<text>元</text>
										</view>
										<text>满{{ item.coupon.conditions }}元立减</text>
									</view>
									<view class="yline"></view>
									<view class="rule">
										<template v-if="item.coupon.commodity_limit_type == 1">
											<text>商品可用:</text>
											<text>{{ item.coupon.limit_value }}</text>
										</template>
										<template v-if="item.coupon.commodity_limit_type == 2">
											<text>商品不可用:</text>
											<text>{{ item.coupon.limit_value }}</text>
										</template>
										<template v-if="item.coupon.commodity_limit_type == 3">
											<text>分类可用:</text>
											<text>{{ item.coupon.limit_value }}</text>
										</template>
									</view>
								</view>
								<view class="coupon_botom" v-if="item.status == 0">
									<text v-if="item.coupon.time_limit_type == 0">领取日内{{ item.coupon.limit_time }}天有效</text>
									<text v-if="item.coupon.time_limit_type == 1">
										{{ $u.timeFormat(item.coupon.limit_indate_begin, 'yyyy年mm月dd日') }}—{{ $u.timeFormat(item.coupon.limit_indate_end, 'yyyy年mm月dd日') }}
									</text>
									<view class="uni-flex-column btns" @click="tohome()">立即使用</view>
								</view>
								<view class="icon_box" v-if="item.status == 1"><text class="el-sc-yishixiao"></text></view>
								<view class="icon_box" v-if="item.status == 2"><text class="el-sc-guoqi"></text></view>
							</view>
							<!--<view class="item user_cou uni-flex-row">
								<view class="uni-flex-column uni-flex-column-center price sm-font">
									<text class="lg-font">￥{{ item.coupon.denomination }}</text>
									<text>满{{ item.coupon.conditions }}可用</text>
								</view>
								<view class="uni-flex-column content">
									<text>{{ item.coupon.name }}</text>
									<text v-if="item.coupon.time_limit_type == 0">领取日内{{ item.coupon.limit_time }}天有效</text>
									<text v-if="item.coupon.time_limit_type == 1">{{ item.coupon.limit_indate_begin }}-{{ item.limit_indate_end }}</text>
								</view>
				
								<view class="uni-flex-column btns" v-if="item.status == 0"><text>去使用</text></view>
							</view>
							<view class="coll_item">
								<u-collapse-item title="使用规则">
									<view>
										<template v-if="item.coupon.commodity_limit_type == 1">
											<text>商品可用:</text>
											<text>{{ item.coupon.limit_value }}</text>
										</template>
										<template v-if="item.coupon.commodity_limit_type == 2">
											<text>商品不可用:</text>
											<text>{{ item.coupon.limit_value }}</text>
										</template>
										<template v-if="item.coupon.commodity_limit_type == 3">
											<text>分类可用:</text>
											<text>{{ item.coupon.limit_value }}</text>
										</template>
									</view>
								</u-collapse-item>
							</view> -->
						</block>
					</u-collapse>
				</scroll-view>
			</view>
		</block>

		<view class="footer uni-view uni-flex-row uni-underline">
			<view @click="tab = 0" :class="[tab == 0 ? 'active' : '', 'item', 'uni-center', 'lg-font']"><text>领券中心</text></view>
			<view @click="tab = 1" :class="[tab == 1 ? 'active' : '', 'item', 'uni-center', 'lg-font']"><text>我的优惠券</text></view>
		</view>
		<tab-bar ref="tabbar" :PageId="15"></tab-bar>
		
	</view>
</template>

<script>
import http from '@/common/http.js';
import {mapState, mapMutations} from 'vuex';
export default {
	data() {
		return {
			page: 1,
			page1: 1,
			tabIndex: 0,
			tab: 0,
			couponlist: [],
			userlist: [],
			title: '我的优惠券'
		};
	},
	async onLoad(e) {
		await this.$getWx
		if (e.type) {
			this.tab = e.type;
		}

		this.getlist();
		this.mylist();
	},
	onShareAppMessage() {
		return this.wxShare();
	},
	watch: {
		tab() {
			if (this.tab == 0) {
				this.title = '领券中心';
			} else {
				this.title = '我的优惠券';
			}
			uni.setNavigationBarTitle({
				title: this.title
			});
		}
	},
	computed: {
		...mapState({
			mallBaseinfo: state => state.mallBaseinfo,
			skin:state=>state.skin
		})
	},
	methods: {
		tapTab(type) {
			this.tabIndex = type;
			this.userlist = [];
			this.page = 1;
			this.mylist();
		},

		tohome() {
			this.Jumpurl(
				{
					type: 1,
					link: '../index/index'
				},
				'switch'
			);
		},
		todetail(id) {
			this.Jumpurl({
				link:'../conpon/detail?id=' + id,
				type: 1,
			})
			// uni.navigateTo({
			// 	url: '
			// });
		},
		getlist() {
			http('/coupon/list?page=' + this.page1 + '&size=10', {}, 'POST').then(res => {
				let list = res.data.msg.data;
				list.forEach(a => {
					if (a.merchant_is_self) {
						a.merchant_name = this.mallBaseinfo.mall_name;
					}
					if (a.limit_indate_begin && a.limit_indate_end) {
						a.limit_indate_begin = a.limit_indate_begin.replace(/-/g, '/');
						a.limit_indate_end = a.limit_indate_end.replace(/-/g, '/');
					}
				});
				if (list.length > 0) {
					this.page1++;
				}
				this.couponlist = this.couponlist.concat(list);
			});
		},
		mylist() {
			http('/user/coupon/list?page=' + this.page + '&size=10', {status: this.tabIndex}, 'POST').then(res => {
				let list = res.data.msg.data;
				list.forEach(a => {
					if (a.merchant_is_self) {
						a.merchant_name = this.mallBaseinfo.mall_name;
					}
					if (a.coupon.limit_indate_begin && a.coupon.limit_indate_end) {
						a.coupon.limit_indate_begin = a.coupon.limit_indate_begin.replace(/-/g, '/');
						a.coupon.limit_indate_end = a.coupon.limit_indate_end.replace(/-/g, '/');
					}
				});
				if (list.length > 0) {
					this.page++;
				}
				this.userlist = this.userlist.concat(list);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.uni-block-bar {
	justify-content: space-between;
	height: 80rpx;
	z-index: 100;
	width: 750rpx;

	.item {
		line-height: 78rpx;
		flex: 1;
		color: #696969;
		border-bottom: 4rpx solid #ffffff;
		text {
			display: inline-block;
		}
	}

	.active {
		color:var(--main-color);
		border-bottom: 4rpx solid var(--main-color);
	}
}

.list {
	padding-top: 20rpx;
	height: 100%;

	&.clist {
		height: calc(100% - 80rpx);
	}

	.item {
		background: #fff;
		height: 160rpx;
		border-radius: 12rpx;
		width: 686rpx;
		margin-left: 32rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		position: relative;
		&.user_cou {
			border-radius: 12rpx 12rpx 0 0;
			margin-bottom: 30rpx;
			background: url(https://jzwl365.oss-cn-beijing.aliyuncs.com/static/images/coupon_bg.png);
			background-size: cover;
			width: 698rpx;
			height: 320rpx;
			align-items: flex-start;
			color: #ffffff;

			.title {
				padding: 0 50rpx;
				width: 100%;
				// margin-left: 50rpx;
				height: 86rpx;
				line-height: 86rpx;
				font-size: 26rpx;
				font-weight: 500;
			}
			.content {
				margin-left: 50rpx;
				line-height: 1;
				margin-right: 50rpx;
				.price {
					// flex: 1;
					min-width: 90px;
					font-size: 28rpx;
					.num {
						text:first-child {
							font-size: 80rpx;
						}
						margin-bottom: 10rpx;
					}
				}
				.yline {
					width: 1px;
					height: 96rpx;
					background: #ffffff;
					margin: 0 50rpx;
				}
				.rule {
					// max-width: 300rpx;
					// flex: 1.5;
				}
			}
			.coupon_botom {
				position: absolute;
				bottom: 0;
				font-size: 28rpx;
				color: #666666;
				height: 86rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				width: 100%;
				.btns {
					width: 134rpx;
					// height: 46rpx;
					background: rgba(74, 99, 206, 0);
					border: 2rpx solid #fc5e25;
					border-radius: 23px;
					font-size: 24rpx;
					font-weight: 500;
					color: #fc5e25;
					padding: 7rpx 0;
					// line-height:46rpx;
					text-align: center;
				}
			}
			&.can_cal {
				background: url(https://jzwl365.oss-cn-beijing.aliyuncs.com/static/images/coupon_cal_bg.png);
				background-size: cover;
				height: 232rpx;
				color: #999999;
				.yline {
					background: #d0cdd0;
				}
				.icon_box {
					width: 232rpx;
					height: 232rpx;
					position: absolute;
					right: 0;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					text {
						font-size: 160rpx;
					}
					.el-sc-yishixiao {
						font-size: 200rpx;
					}
				}
			}
		}
	}
	.coll_item {
		background: #fff;
		border-radius: 0 0 12rpx 12rpx;
		width: 686rpx;
		margin-left: 32rpx;
		padding: 0 24rpx;
		margin-bottom: 20rpx;
		/deep/.u-collapse-head {
			font-size: 24rpx;
		}
	}
}
.footer {
	height: 100rpx;
	width: 750rpx;
	// font-weight: bold;
	.active {
		color:var(--main-color);
	}
	view {
		flex: 1;
		align-items: center;
		justify-content: center;
		display: flex;
	}
}
</style>
